<script setup lang="ts">
import {reactive, ref, watch, defineProps} from "vue";
import {TableMaterialType} from "@/data-type/material.type";
const defaultProps = {
  type: 'table',
  props: {
    dataSource: [
      {
        key: '1',
        name: '胡彦斌',
        age: 32,
        address: '西湖区湖底公园1号',
      },
      {
        key: '2',
        name: '胡彦祖',
        age: 42,
        address: '西湖区湖底公园1号',
      },
    ],
    columns: [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
    ],
  }
}

const props = defineProps<{material:TableMaterialType}>();
let formState = reactive<TableMaterialType>(props.material);
formState.props = Object.assign(defaultProps.props, formState.props?formState.props:{});
watch(props, (newValue, oldValue)=>{
  formState = newValue.material;
});
</script>

<template>
  <div class="zhtt-material-table">
    <a-table :columns="formState.props.columns" :data-source="formState.props.dataSource">
      <template #headerCell="{ column }">
        <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
        </template>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          <a>
            {{ record.name }}
          </a>
        </template>

        <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<style scoped>

</style>
